
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>{{model_name}}</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    
    <script type="text/javascript" src="/dygraph-combined-dev.js"></script>
        <!--<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>-->
    <script type="text/javascript" src="/dygraph-extra.js"></script>
    <script type="text/javascript" src="/dat.gui.min.js"></script>

    <style>
/**
 * basic layout
 */
  
  /* colors */
  #header,
  #footer {
    background-color: #f1f1f1;
  }
  
  #main-wrap {
    background-color: #D9D9D9;
  }
  
  #sidebar {
    background-color: #d2d2d2;
  }
  
  #content-wrap {
    background-color: #c5c5c5;
  }
  
  /* sizes */
  #main-wrap > div {
    min-height: 450px;
  }
  
  
  #header,
  #footer {
    min-height: 40px;
  }
  
  

  #main-wrap > div { min-height: 450px; }
  
  
  #header,
  #footer {
      min-height: 40px;
  }
  
  
  /* layout */
  #main-wrap {
      /* overflow to handle inner floating block */
      overflow: hidden;
  }
  
  #sidebar {
      float: left;
      width: 20%;
  }
  
  #content-wrap {
      float: right;
      width: 80%;
  }  
  
    </style>

    </head>
    <body>
  

  <div id="header">  <h3 style="width:100%; text-align: center;">{{model_name}}</h3></div>
  <div id="main-wrap">
    <div id="sidebar"></div>
    <div id="content-wrap">
         
            <div id="div_g" style="width:100%; height:500px;"></div>
            <img id="div_g_img" hidden></img>
    </div>
  </div>
  <div id="footer">Footer</div>

        <script type="text/javascript">
            var plotData = [];
            var dataStep = 0;
            var isRequesting = false;
            var gui = new dat.GUI({ autoPlace: false });
            var g = new Dygraph(document.getElementById("div_g"), plotData,
                          {
                                drawPoints: false,
                                showRoller: false,
                                rollPeriod: 15,
                                valueRange: [0.0, 10.0],
                                labels: ['Step', 'Cost']
                          });
            var UIState = function()
            {
                this.title = "{{model_name}}";
                this.overallProgress = 0.0;
                this.epochProgress = 0.0;
                this.learningRate = 0.9;
                this.save = function() 
                {

                    var img = document.getElementById('div_g_img');
                    Dygraph.Export.asPNG(g, img);
                    window.location.href = img.src.replace('image/png','image/octet-stream');
                };
            };
            var uiState = new UIState(); 


            gui.add(uiState, 'title').name('Title');
            gui.add(uiState, 'overallProgress', 0.0, 1.0).step(0.01).name('Overall Progress').listen();
            gui.add(uiState, 'epochProgress', 0.0, 1.0).step(0.01).name('Epoch Progress').listen();
            gui.add(uiState, 'learningRate').name('Learning Rate');
            gui.add(uiState, 'save').name('Save');
    
            var controlContainer = document.getElementById('sidebar');
            controlContainer.appendChild(gui.domElement);
     
            /*var t = new Date();
            for (var i = 10; i >= 0; i--) {
                var x = new Date(t.getTime() - i * 1000);
                data.push([x, Math.random()]);
            }*/




            /*var g = document.getElementById('div_g');
        
            Plotly.plot( g, [{
                x: [],
                y: [] }], { margin: { t: 0 } } );
            */
            /*
            setInterval(function() {
                var x = new Date();  // current time
                var y = Math.random();
                data.push([x, y]);
                g.updateOptions( { 'file': data } );
            }, 1000);
            */
      
            var socket = new WebSocket('ws://{{websocket_address}}:5678');
	          socket.binaryType = 'arraybuffer';

	          socket.onopen = function (event) 
	          {
                console.log("socket open");
	          };

	          socket.onmessage = function (e) 
	          {
  		          var data = e.data;
  		          var dv = new DataView(data);
  		          var messageName = dv.getUint32(0, true);

  		          if (messageName == 6543 && !isRequesting) // new update
  		          {
  			            var newDataStep = dv.getUint32(4, true);
  
  			            if (dataStep < newDataStep)
  			            {
  				              isRequesting = true;

  				              var from = dataStep;
  				              var size = newDataStep - dataStep;
  				              var message = 6544; // query

  				              var buffer = new ArrayBuffer(12);

  				              var wdv = new DataView(buffer);

  				              wdv.setUint32(0, message, true);
  				              wdv.setUint32(4, from, true);
  				              wdv.setUint32(8, size, true);

  				              socket.send(buffer);
  			            }
  		          }
  		          else if(messageName == 6545)
  		          {		
  			            var size = dv.getUint32(4, true) * 2;
	             			var step = 0;
  			            var value = 0;

                    var stepArray = new Uint32Array(data, 8);
                    var valueArray = new Float32Array(data, 12);
                    var currentIndex = 0;

                    setTimeout(function populateData(){
            
                        var fence = currentIndex + 2000;
                        if (fence > size)
                        {
                            fence = size;
                        }

                        var xArray = new Array();
                        var yArray = new Array();

                        for (;currentIndex < fence; currentIndex += 2)
                        {
                            step = stepArray[currentIndex];
                            cost = valueArray[currentIndex];

                            plotData.push([step, cost]);
                            /*xArray.push(step);
                            yArray.push(cost);*/
                        }

                        g.updateOptions({'file' : plotData});

                        /*var update = {
                            x: [xArray],
                            y: [yArray]
                        };
                        Plotly.extendTraces(g, update, [0]);
                        */
                        if (currentIndex == size)
                        {
                            dataStep = step + 1;
                            isRequesting = false;
                        }
                        else
                        {
                            setTimeout(populateData,0);
                        }
            
                    },0);
            
  		          }
                else if(messageName == 6546)
                {
                    var epoch = dv.getFloat32(4, true);
			              var overall = dv.getFloat32(8, true);
  			
                    uiState.epochProgress = epoch;
                    uiState.overallProgress = overall;
  	
                    //console.log("epoch" + epoch + "overall" +overall);    
                }
	           };

          </script>
      </body>
</html>
